<template>
	<yingbing-audio
	ref="audio"
	:autoplay="$store.getters['setting/GET_AUDIO_AUTOPLAY'] == 1"
	:src="src"
	:poster="poster"
	:title="title"
	:lyric="lyrics"
	:lyricConfig="lyricConfig"
	@lyricChange="lyricChange"
	@ended="handleEnded"
	@canplay="handleCanplay"
	@play="handlePlay"
	@pause="handlePause"
	@error="handleError"
	@timeupdate="handleTimeUpdate"
	></yingbing-audio>
</template>
<script>
	import appMixin from '@/common/mixin/app.js'
	export default {
		mixins: [appMixin],
		computed: {
			lyricConfig () {
				return {
					mode: this.lyricShow ? 'overall' : 'hidden',
					fillColor: this.skinColor.color_theme_1,
					strokeColor: this.skinColor.color_1,
					offset: uni.getSystemInfoSync().windowBottom + uni.upx2px(20)
				}
			},
			src () {
				return this.$store.getters['audio/GET_CURRENT_SRC']
			},
			title () {
				return this.$store.getters['audio/GET_CURRENT_TITLE']
			},
			lyrics () {
				return this.$store.getters['audio/GET_LYRIC_LIST']
			},
			lyricShow () {
				return this.$store.getters['audio/GET_LYRIC_SHOW']
			}
		},
		beforeCreate() {
			uni.$on('seekSong', time => {
				this.seek(time)
			})
			uni.$on('play', () => {
				this.play()
			})
			uni.$on('pause', () => {
				this.pause()
			})
		},
		beforeDestroy () {
			this.$store.dispatch('audio/stop')
			this.$store.dispatch('audio/clear')
			uni.$off('seekSong')
			uni.$off('play')
			uni.$off('pause')
		},
		methods: {
			getRandomPlayList () {
				let randomList = this.randoms.filter(rnd => this.catalogs.findIndex(ply => ply.id == rnd.id) > -1 )
				let otherList = this.catalogs.filter(rnd => this.randoms.findIndex(ply => ply.id == rnd.id) == -1 )
				let len = otherList.length
				let min = 0;
				let max = len - 1;
				let arr = [];
				while ( arr.length < len ) {
					let value = Math.floor(Math.random() * (max - min + 1)) + min;
					if ( arr.indexOf(value) == -1 ) {
						arr.push(otherList[value])
					}
				}
				return randomList.concat(arr)
			},
			lyricChange (e) {
				this.$store.commit('audio/SET_LYRIC_INDEX', e.index)
				this.$store.commit('audio/SET_LYRIC_TITLE', e.title)
			},
			handleCanplay (e) {
				this.$store.commit('audio/SET_DURATION', e.duration)
			},
			handleTimeUpdate (e) {
				this.$store.commit('audio/SET_CURRENT_TIME', e.currentTime)
			},
			handlePlay () {
				this.$store.commit('audio/SET_PAUSED', false)
			},
			handlePause () {
				this.$store.commit('audio/SET_PAUSED', true)
			},
			handleStop () {
				this.$store.dispatch('audio/stop')
			},
			handleEnded () {
				this.$store.dispatch('audio/next')
			},
			handleError () {
				uni.showToast({
					title: '播放失败，2秒后继续播放',
					icon: 'none',
					duration: 2000
				})
				setTimeout(() => {
					this.$store.dispatch('audio/next')
				}, 2000)
			},
			seek (time) {
				this.$refs.audio.seek(time)
			},
			play () {
				this.$refs.audio.play()
			},
			pause () {
				this.$refs.audio.pause()
			},
			stop () {
				this.$refs.audio.stop()
			}
		}
	}
</script>

<style>

</style>
